<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test1"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    class Login extends React.Component {
        username
        password

        // 初始化状态
        state = {
            username: "",
            password: ""
        }

        // 现用现取就是
        handleSubmit = (event) => {
            event.preventDefault() // 取消表单的提交
            alert(this.state.username + " " + this.state.password)
        };

        // 保存用户名到状态中
        saveUsername = (event) => {
            let value = event.target.value;
            console.log(value)
            this.setState({username: event.target.value})
        };

        // 保存密码到状态中
        savePassword = (event) => {
            let value = event.target.value;
            console.log(value)
            this.setState({password: event.target.value})
        };

        // 输入框输入的内容保存到状态里（随着输入，维护状态，就是受控组件）， 在状态里去取，  就是vue的双向绑定

        render() {
            return (
                    <div>

                        <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                            用户名: <input onChange={this.saveUsername} type="text" name="username"/>

                            密码: <input onChange={this.savePassword} type="password" name="password"/>
                            <button>登陆</button>
                        </form>

                    </div>
            )
        }
    }

    ReactDOM.render(<Login/>, document.getElementById("test1"))
</script>
</body>
</html>